<template>
	<view class="content">
		<u-sticky offset-top="0">
			<u-tabs :list="tabList" :is-scroll="false" font-size="28" height="88" bar-width="56" :bar-style="tabActive"
			 active-color="#171919" inactive-color="#666666" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="subject">
			<view class="group-card mt20" v-for="item in list" :key="item.id">
				<view class="flex group-tit">
					<view class="fs26 c3">订单号：539279789767758</view>
					<view class="fs26 maincolor">待收货</view>
				</view>
				<groupItem :groupData="item"></groupItem>
				<view class="info flex">
					<view class="c3 fs22">合计：￥<span class="fs30">{{item.goods_price}}</span></view>
					<view>
						<u-button shape="circle" plain size="mini" class="ml20" @click="handleShow" v-if="item.status === 1">查看物流</u-button>
						<u-button shape="circle" plain size="mini" class="ml20" :custom-style="lastBtn" v-if="item.status === 0">联系客服</u-button>
						<u-button shape="circle" plain size="mini" class="ml20" :custom-style="lastBtn" v-if="item.status === 1">确认收货</u-button>
						<u-button shape="circle" plain size="mini" class="ml20" :custom-style="lastBtn" v-if="item.status === 2">评价商品</u-button>
						<u-button shape="circle" plain size="mini" class="ml20" :custom-style="lastBtn" v-if="item.status === 3">添加追评</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="group-btn flex">
			<view class="btn-box">
				<u-button shape="circle" plain :custom-style="lastBtn" @click="linkMyGroup">我的拼团</u-button>
			</view>
			<view class="btn-box">
				<u-button shape="circle" plain :custom-style="botLfBtn" @click="linkMyMakeUp">拼团订单</u-button>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" closeable height="960">
			<view class="sticsTit c3 fs30">物流信息</view>
			<u-gap height="160" bg-color="#fff"></u-gap>
			<stics></stics>
		</u-popup>
	</view>
</template>

<script>
	import order from "../../json/order.js"
	import groupItem from "../../components/group/group.vue"
	import stics from "../../components/orderitems/stics.vue"
	export default {
		components: {
			groupItem,
			stics
		},
		data() {
			return {
				show: false,
				current: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '评价'
				}],
				tabActive: {
					background: "#FCB900"
				},
				list: {},
				lastBtn: {
					borderColor: "#F9274A",
					color: "#F71D41"
				},
				botLfBtn: {
					background: "linear-gradient(to right,#F74563,#F72A4C)",
					color: "#FFFFFF"
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			handleShow() {
				this.show = !this.show;
			},
			setOrderType() {
				order.record.map(item => {
					switch (item.status) {
						case 0:
							item.statusText = "待使用"
							break;
						case 1:
							item.statusText = "待收货"
							break;
						case 2:
							item.statusText = "待评价"
							break;
						case 3:
							item.statusText = "已完成"
							break;
						default:
							break;
					}
				})
			},
			linkMyMakeUp(){
				
			},
			linkMyGroup(){
				uni.navigateTo({
					url:"/pages/my/group"
				})
			}
		},
		onLoad() {
			this.setOrderType();
			this.list = order.record;
		}
	}
</script>

<style scoped>
	.content {
		padding-bottom: 128rpx;
	}

	.subject {
		padding: 0 20rpx;
	}

	.group-card {
		background: #FFFFFF;
		padding: 20rpx 26rpx 24rpx;
		border-radius: 12rpx;
	}

	.info {
		margin-top: 32rpx;
	}

	.group-btn {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		padding: 10rpx 24rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
	}

	.btn-box {
		width: 340rpx;
		height: 80rpx;
	}

	.group-tit {
		padding: 20px 0;
	}

	.maincolor {
		color: #F71E42;
	}

	.sticsTit {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #F0F0F0;
		background: #FFFFFF;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}
</style>
